import Rte from 'editor/index'
import { Refs } from 'share/declare'
import { htmlToElement } from 'share/utils'

interface DelimiterRefs extends Refs {
  root: HTMLDivElement
}

export default class DelimiterMenu {
  public $refs: DelimiterRefs

  public constructor(public editor: Rte) {
    const root = htmlToElement(`<div class="rte-toolbar__delimiter"></div>`) as HTMLDivElement
    this.$refs = { root }
    editor.$data.$immediate('menuDelimiter', (nv) => {
      typeof nv === 'string' ? root.style.setProperty('margin', `0 ${nv}`) : root.style.removeProperty('margin')
    })
  }
}
